<template>
  <div>
    <div class="kylin-form configure-confirm-table">
      <ky-table
        :search_data="search_data"
        :getData="confirmConfigureList"
        :search_criteria="search_criteria"
        :appendToBody="true"
        :modalTable="true"
        ref="table"
      >
        <template v-slot:table>
          <el-table-column prop="name" :label="$t('configure.configure_item')">
          </el-table-column>
          <el-table-column
            prop="ip"
            :label="$t('system.ip_address')"
          >
          </el-table-column>
          <el-table-column prop="hostBaseline" :label="$t('configure.original_value')">
          </el-table-column>
          <el-table-column prop="migrateBaseline" :label="$t('configure.target_value')">
          </el-table-column>
        </template>
      </ky-table>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCancel">{{ $t("cancel") }}</el-button>
      <el-button class="kylin-button" @click="handleOk">{{
        $t("configure.confirm_issue")
      }}</el-button>
    </div>
  </div>
</template>

<script>
import kyTable from "@/components/KyTable";
import {
  confirmConfigureList,
  issueMigrateTemplateByBatch,
  issueMigrateTemplateByHosts,
} from "@/api/migrate_template";
export default {
  props: {
    templateId: {
      type: Number,
    },
    form: {
      type: Object,
      default: function () {
        return {};
      },
    },
  },
  components: {
    kyTable,
  },
  data() {
    return {
      loading: false,
      search_criteria: {
        templateId: this.templateId,
        host: this.form.host,
        batch: this.form.batch,
        target_type: this.form.target_type
      },
      search_data: {
        name: {
          name: "configure.configure_item",
          type: "text",
        },
        ip: {
          name: "system.ip_address",
          type: "text",
        },
        hostBaseline: {
          name: "configure.original_value",
          type: "text",
        },
        migrateBaseline: {
            name: "configure.target_value",
            type: "text",
        }
      },
    };
  },
  methods: {
    confirmConfigureList,
    handleOk() {
      let { target_type, batch, host, file } = this.form;
      this.loading = true;
      if (target_type === "batch") {
        issueMigrateTemplateByBatch({
          migrateTemplateId: this.templateId,
          batchId: batch,
        }).then((res) => {
          if (res.data.code == "0") {
            this.$message({
              type: "success",
              message: res.data.message,
            });
            this.$emit("click", "success");
            this.$router.push({
              name: "log_detail",
              params: { id: res.data.data.parentId },
            });
          } else {
            this.$message({
              type: "error",
              message: res.data.message,
            });
          }
        });
        this.loading = false;
      } else {
        issueMigrateTemplateByHosts({
          migrateTemplateId: this.templateId,
          hostIds: host,
        }).then((res) => {
          if (res.data.code == "0") {
            this.$message({
              type: "success",
              message: res.data.message,
            });
            this.$emit("click", "success");
            this.$router.push({
              name: "log_detail",
              params: { id: res.data.data.parentId },
            });
          } else {
            this.$message({
              type: "error",
              message: res.data.message,
            });
          }
          this.loading = false;
        });
      }
    },
    handleCancel() {
      this.$emit("click");
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.configure-confirm-table {
    max-height: 600px;
    overflow: auto;
}
</style>